<div class="container">
  <div class="form-layout">
    <div class="form-wrap">
      <form class="form-horizontal" [formGroup]="profileForm">
        <div class="form-group">
          <label for="firstName" class="col-sm-5 control-label">First Name:</label>
          <div class="col-sm-7">
            <input type="text" class="form-control" id="firstName" placeholder="First Name" formControlName="firstName">
          </div>
        </div>

        <div class="form-group">
          <label for="lastName" class="col-sm-5 control-label">Last Name:</label>
          <div class="col-sm-7">
            <input type="text" class="form-control" id="lastName" placeholder="Last Name" formControlName="lastName">
          </div>
        </div>

        <div formGroupName="address">
          <h4>Address（嵌套FormGroup）</h4>

          <div class="form-group">
            <label for="street" class="col-sm-5 control-label">street:</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="street" placeholder="street" formControlName="street">
            </div>
          </div>

          <div class="form-group">
            <label for="city" class="col-sm-5 control-label">city:</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="city" placeholder="city" formControlName="city">
            </div>
          </div>

          <div class="form-group">
            <label for="state" class="col-sm-5 control-label">state:</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="state" placeholder="state" formControlName="state">
            </div>
          </div>
        </div>

        <div formGroupName="information">
          <h4>Information（禁用FormGroup）</h4>

          <div class="form-group">
            <label for="height" class="col-sm-5 control-label">height:</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="height" placeholder="身高" formControlName="height">
            </div>
          </div>

          <div class="form-group">
            <label for="age" class="col-sm-5 control-label">age:</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="age" placeholder="年龄" formControlName="age">
            </div>
          </div>

          <div class="form-group">
            <label for="gender" class="col-sm-5 control-label">gender:</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="gender" placeholder="性别" formControlName="gender">
            </div>
          </div>
        </div>

        <div formArrayName="aliases">
          <div class="form-array">
            <span>Aliases（FormArray）</span>
            <button class="btn btn-default" (click)="addAlias()">Add Alias</button>
          </div>

          <ng-container *ngFor="let alias of aliases.controls; let i=index">
            <div class="form-group">
              <label for="Alias{{i}}" class="col-sm-5 control-label">Alias{{i}}:</label>
              <div class="col-sm-7">
                <input type="text" class="form-control" id="Alias{{i}}" placeholder="Alias{{i}}" [formControlName]="i">
              </div>
            </div>
          </ng-container>
        </div>

        <!--  <button class="btn btn-primary" type="submit" [disabled]="!profileForm.valid">Submit</button>-->
      </form>
    </div>

    <div class="selected-wrap">
      <form>
        <div class="form-group">
          <label>请选择FormGroup</label>
          <nz-tree-select
            name="formGroup"
            [nzNodes]="dropdownDataList['formGroup']"
            [nzExpandedKeys]="dropdownDataList['formGroupExpandKeys']"
            nzPlaceHolder="请选择FormGroup控件"
            [(ngModel)]="selectedFormStr.formGroup"
            (ngModelChange)="handleFormGroupChange($event)"
          >
          </nz-tree-select>
        </div>
        <div class="form-group">
          <label>请选择FormControl</label>
          <nz-tree-select
            name="formControl"
            [nzNodes]="dropdownDataList['formControl']"
            [nzExpandedKeys]="dropdownDataList['formControlExpandKeys']"
            nzPlaceHolder="请选择FormControl控件"
            [(ngModel)]="selectedFormStr.formControl"
            (ngModelChange)="handleFormControlChange($event)"
          >
          </nz-tree-select>
        </div>
      </form>
      <app-select-time [type]="'MIN'"></app-select-time>
    </div>

    <div class="feature-wrap">
      <ul class="nav nav-tabs">
        <li role="presentation" class="active" appSwithActive><a routerLink="/main/form-control">formControl</a></li>
        <li role="presentation" appSwithActive><a routerLink="/main/form-group">formGroup</a></li>
        <li role="presentation" appSwithActive><a routerLink="/main/form-array">formArray</a></li>
      </ul>
      <router-outlet></router-outlet>
    </div>
  </div>
</div>
